<template>
  <div>
    <!--操作记录 -->
    <el-dialog width="80%" v-model="viewDetails" :title="title + hashId" top="20vh" class="el-overlay1"
      @close="handleclose">
      <el-table :data="ruleDetailList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="tradeHash" label="交易哈希"></el-table-column>
        <el-table-column label="国家授时">
          <el-table-column prop="rid" label="rid"> </el-table-column>
          <el-table-column prop="sn" label="sn"> </el-table-column>
          <el-table-column prop="createTime" label="时间"> </el-table-column>
          <el-table-column prop="ctsr" label="时间编码">
            <template #default="scope">
              <el-popover trigger="hover" placement="right">
                <div>
                  <p>
                    {{ scope.row.ctsr }}
                  </p>
                </div>
                <template v-slot:reference>
                  <div class="name-wrapper">
                    <span> {{ scope.row.ctsr }}</span>
                  </div>
                </template>
              </el-popover>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="name" label="业务名称"></el-table-column>
        <el-table-column prop="serviceData" label="业务数据">
          <template #default="scope">
            <el-popover trigger="hover" placement="right">
              <div>
                <p>
                  {{ scope.row.serviceData }}
                </p>
              </div>
              <template v-slot:reference>
                <div class="name-wrapper">
                  <span> {{ scope.row.serviceData }}</span>
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="chainStatus" label="上链状态" v-if="isBlockchain">
          <template #default="scope">{{
            scope.row.chainStatus == 0 ? "未上链" : "已上链"
          }}</template>
        </el-table-column>
        <!-- <el-table-column prop="name" label="状态信息"> </el-table-column> -->
        <el-table-column prop="remark" label="备注"> </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { ElMessage } from "element-plus";
import { ref, reactive, getCurrentInstance } from "vue";
import api from "../api/api";
export default {
  setup(props, context) {
    console.log(context);
    console.log(context.attrs.ruleDetailList);
    let { proxy } = getCurrentInstance();
    // 是否展示区块链
    const isBlockchain = ref(null);
    // 获取vuex里面的方法
    proxy.$store.dispatch('isBlockchain').then((res) => {
      isBlockchain.value = res;
    })
    const is_realname = context.attrs.type;
    const is_tradeHash = context.attrs.is_tradeHash;
    const ruleDetailList = ref();
    const hashId = context.attrs.hashId;
    const hash = context.attrs.hash;
    const title = context.attrs.title;
    const viewDetails = ref(true);
    const handleclose = () => {
      viewDetails.value = false;
      context.emit("handleclose", viewDetails.value);
    };
    const getList = () => {
      let url = "";
      if (is_tradeHash == 1) {
        url = "external/chain/record/getListByServiceId/";
      } else {
        url = "external/chain/record/getListByTradHash/";
      }
      api
        .getListAPI(url + hashId, {})
        .then((res) => {
          if (res.data.code == 1) {
            ruleDetailList.value = res.data.data;
          } else {
            ElMessage.error(res.data.message);
          }
          //数据处理
        })
        .catch((err) => {
          console.log(err);
        });
    };
    getList();
    return {
      viewDetails: true,
      ruleDetailList,
      is_realname,
      hashId,
      title,
      hash, isBlockchain,
      handleclose,
    };
  },
};
</script>
<style scoped>
.name-wrapper {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  /* 这里是超出几行省略 */
}
</style>
